<template>
  <div>
    <!-- 头部 -->
    <div class="header">
        <div class="acvator">
            <img :src="userInfo.avatar" alt="" class="img">
        </div>
        <div class="info">
            <div class="nickname">{{userInfo.shop_name}}</div>
            <div class="user">{{ userInfo.mobile }} | {{ userInfo.nickname }}</div>
        </div>
        <div class="level">
            <img src="../../../assets/shop/star.png" alt="" class="img">
            银牌</div>
      <div class="edit" @click="toeditInfo()">编辑</div>
    </div>
    <!-- 收益 -->
    <div class="profit">
        <div class="shop-total item">
            <div class="title">
                店铺总收益(元)
            </div>
            <div class="amount">{{ userInfo.shop_total }}</div>
        </div>
        <div class="today-forecast item">
            <div class="title">
                预计今日收益(元)
            </div>
            <div class="amount">{{ userInfo.shop_today }}</div>
        </div>
    </div>
    <!-- tab栏 -->
    <div class="tabs-title">
        <div class="title">
            <div @click="toOrderList">待发货</div>
            <div class="active">商品管理</div>
            <div @click="toSupplier">1314义乌小镇</div>
        </div>
        <div class="subtitle">
            <div class="item" :class="type == 1 ? 'active':''" @click="typeChange(1) ">自营商品管理</div>
            <div class="item"  :class="type == 2 ? 'active':''" @click="typeChange(2) ">1314义乌小镇商品管理</div>
        </div>
    </div>
    <!-- 商品列表 -->
    <div class="goods">
        <div class="left-nav">
            <div
            class="nav-item"
            :class="activeIndx == index ? 'active' : ''"
            v-for="(item, index) in navlist"
            :key="index"
            @click="tabchange(index, item)"
            >
            {{ item.name }}
            </div>
        </div>
        <!-- 商品信息 -->
        <div class="content-box">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="goods-item" v-for="(item, index) in list"  :key="index">
                    <div class="goods-box" @click="handlerDetails(item.id)">
                        <div class="goods-img">
                            <img :src="item.image" />
                        </div>
                        <div class="goods-info">
                            <div class="name">{{ item.title }}</div>
                            <div class="price">¥{{ item.price }}</div>
                        </div>
                    </div>
                    <!-- 商品操作栏 -->
                    <div class="options">
                        <div class="item" @click.stop="showChangeStatus(item)">
                            <img src="../../../assets/up.png" alt="" class="up-img">
                            {{statusMap[item.status]}}
                        </div>
                        <div class="line"/>
                        <div class="item" @click="editGoods(item.id)" >
                            <img src="../../../assets/edit.png" alt="" class="edit-img">
                            编辑
                        </div>
                        <div class="line"/>
                        <div class="item" @click.stop="del(item.id)">
                            <img src="../../../assets/del.png" alt="" class="del-img">
                            删除
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
    <div class="add-goods"><van-button class="btn" @click="addGoods">添加商品</van-button></div>

    <van-dialog v-model="statusChangeShow" show-cancel-button @confirm="changeStatusConfirm">
        <div class="status-dialog">
            <div class="current-status"><span>当前状态：</span> <span class="value">{{statusMap[ChangeStatusGoods.status]}}状态</span></div>
            <div class="title">变更状态</div>
            <div class="status-list">
                <div v-for="item in statusList" :key="item.value" class="item" :class="status == item.value ? 'active' : ''" @click="status = item.value" >
                    {{item.name}}
                    <img src="../../../assets/right.png" alt="">
                </div>
            </div>
        </div>
    </van-dialog>
  </div>
</template>

<script>
import { getCategoryByShopId,getGoodsByShopCategory,SupplierChangeStatus,SupplierDel,userInfo5G } from "@/api/api";
import { Dialog } from 'vant';
export default {
    name: "goods",
    components: {
    },
    data(){
        return {
            type:1,
            navlist:[],
            list:[],
            activeIndx: 0,
            goodsPage:0,
            statusChangeShow:false,
            ChangeStatusGoods:{},
            status:'',
            statusList:[{name:'上架',value:'normal'},{name:'下架',value:'hidden'}],
            statusMap:{ 'normal':'上架', 'hidden':'下架'  },
            loading:false,
            finished:false,
            userInfo:{}
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            userInfo5G({token5g:localStorage.getItem("token5g")}).then(res=>{
                this.userInfo = res.data.data
                this.getCategoryByShopId()
            })
        },
        onLoad(){
            if(this.navlist && this.navlist.length > 0){
                this.getGoodsByShopCategory(this.navlist[this.activeIndx].id,this.goodsPage)
            }
        },
      toeditInfo(){
        this.$router.push("/shopApply");
      },
        getCategoryByShopId(){
            getCategoryByShopId().then(res=>{
              if(res.data.code){
                this.navlist = res.data.data
                if(res.data.data.length <=0 ){
                  this.finished = true
                  this.loading = false
                }else {
                  this.onLoad();
                }
              }else{
                this.finished = true
                this.loading = false
                this.navlist = []
              }

            })
        },
        getGoodsByShopCategory(category,goodsPage = 0){
            if(goodsPage == 0){
                this.list = []
                this.finished = false
                this.loading = true
            }
            goodsPage++
            this.goodsPage = goodsPage
            getGoodsByShopCategory({category_id:category,page:this.goodsPage,type:this.type}).then(res=>{
                this.list = this.list.concat(res.data.data.data)
                this.loading = false;
                if(res.data.data.total <= this.list.length || this.goodsPage >= res.data.data.last_page){
                    this.finished = true
                }
            })
        },
        toOrderList(){
            this.$router.push("/orderList");
        },
        toSupplier(){
            this.$router.push("/supplier");
        },
        typeChange(activeIndx){
            if(this.type != activeIndx){
                this.type = activeIndx
                if(this.navlist.length > 0){
                    this.getGoodsByShopCategory(this.navlist[this.activeIndx].id)
                }
            }
        },
        // 点击不同category
        tabchange(index,item){
            this.activeIndx = index
            this.getGoodsByShopCategory(item.id)
        },
        handlerDetails(goodsId){
            this.$router.push("sharegoodDetails/" + goodsId)
        },
        showChangeStatus(goods){
            this.statusChangeShow = true
            this.ChangeStatusGoods = goods
            this.status = goods.status
        },
        changeStatusConfirm(){
            SupplierChangeStatus({status:this.status,goods_id:this.ChangeStatusGoods.id}).then(res=>{
                // console.log(res);
                if(res.data.code == 1){
                    this.getGoodsByShopCategory(this.navlist[this.activeIndx].id)
                }else {
                    Dialog.alert({
                        message: res.data.msg,
                    }).then(() => {
                    });
                }
            })
        },
        editGoods(id){
            this.$router.push({
                name:"goodsEdit",
                query:{goodsId:id}
            })
        },
        del(id){
            Dialog.confirm({
                title: '删除商品后，商品将返回1314平台',
            })
            .then(() => {
                SupplierDel({id}).then(res=>{
                    // console.log(res);
                    if(res.data.code == 1){
                        this.getGoodsByShopCategory(this.navlist[this.activeIndx].id)
                    }else {
                        Dialog.alert({
                            message: res.data.msg,
                        }).then(() => {
                        });
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        },
        addGoods(){
            this.$router.push({
                name:"goodsEdit"
            })
        }
    }
}
</script>

<style scoped>
div {
    box-sizing: border-box;
}
.header {
    position: relative;
    height: 180px;
    background-image: linear-gradient( to left bottom , #ff4040 , #ff7039);
    padding: 60px 20px 40px;
    display: flex;
    align-items: center;
}
.header .edit{
  position: absolute;
  right: 20px;
  top: 20%;
  color: #fff;
  font-size: 12px;
}
.header .acvator {
    width: 70px;
    height: 70px;
}
.header .acvator .img {
    width: 100%;
    height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
}
.header .info {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
    font-size: 12px;
}
.header .info .nickname {
    font-size: 18px;
    color: #fff;
}
.header .info .user {
   width: 36vw;
    background-color: rgba(255,255,255,.3);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header .level {
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(-50%);
    transform: translateX(0);
    background-color: #fff;
    width: 80px;
    height: 30px;
    border-radius: 15px;
    color: #FB5340;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .level .img {
    width: 20px;
    margin-right: 5px;
}

.profit{
    position: relative;
    margin: -20px 10px 0 10px;
    height: 100px;
    border-radius: 10px;
    border: 2px solid #fff;
    background-image: linear-gradient( to right , #F7E8D1 , #F5E2C4);
    display: flex;
    justify-content: space-around;
    align-items: center;
    pad: 20px;
}
.profit .item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
    color: #873A11;
}

.profit .item .title {
    font-size: 10px;
}
.profit .item .amount {
    font-size: 20px;
    font-weight: 700;
}



.tabs-title {
    margin: 10px 10px 0 10px;
    height: 100px;
    box-shadow: 0 0 15px 10px #f8f8f8;
    border-radius: 10px;
}
.tabs-title .title {
    padding: 10px;
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
.tabs-title .title div {
    flex: 1;
    text-align: center;
}
.tabs-title .title .active {
    color: #FA382B;
    position: relative;
}
.tabs-title .title .active::after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 2px;
    background-color: #FA382B;
}

.tabs-title .subtitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}
.tabs-title .subtitle .item {
    background-color: #F5F5F5;
    width: 45%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 0.75rem;
    color: #898889;
}
.tabs-title .subtitle .active {
    color: #FB5449;
    background-color: #FDE3E1;
}

.goods {
    margin: 10px 10px 0 10px;
    background-color: #F8F8F8;
    display: flex;
    padding: 10px;
    padding-right: 0;
    height: calc(100vh - 70px - 380px);
    /* max-height: 500px; */
    margin-bottom: 70px;
}
.left-nav {
    width: 72px;
    text-align: center;
    height: 100%;
    overflow: scroll;
}
.left-nav::-webkit-scrollbar {display: none;}

.nav-item {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin-bottom: 30px;
}
.nav-item.active {
    color: #fb7647;
    font-size: 18px;
}
.content-box {
    width: calc(100% - 82px);
    margin-left: 10px;
    height: 100%;
    overflow: scroll;
}
.content-box::-webkit-scrollbar {display: none;}
.goods-item {
    border-radius: 6px;
    height: 130px;
    width: 100%;
    background-image: linear-gradient( to bottom , #FDF5F5 , #ffffff);
    padding: 10px;
    margin-bottom: 10px;
}
.goods-box {
    height: 70px;
    display: flex;
}
.goods-img {
    width: 70px;
    margin-right: 10px;
}
.goods-img img {
    width: 70px;
    height: 70px;
}
.goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.goods-box .name {
    color: #4A4949;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.goods-box .price{
    color: #FB5B50;
}
.options {
    margin-top: 7px;
    height: 41px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #C1BFBF;
}
.options .line{
    background-color: #F0EFEF;
    width: 1px;
    height: 20px;
}
.options .item {
    display: flex;
    align-items: center;
}
.up-img ,.edit-img ,.del-img{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 2px;
    margin-right: 2px;
}
.up-img {
    background-color: #4FCEBF;
}
.edit-img {
    background-color: #CE4F4F;
}
.del-img{
    background-color: #DAD9DA;
}

.status-dialog {
    padding: 15px;
    line-height: 50px;
}
.status-dialog .current-status {
    color: #A3A3A3;
}
.status-dialog .current-status .value {
    color: #000;
    margin-left: 10px;
}
.status-dialog .title{
    font-size: 16px;
    font-weight: 700;
}
.status-dialog .status-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-dialog .status-list .item {
    width: 46%;
    border: 1px solid #eee;
    border-radius: 5px;
    text-align: center;
    background-color: #f8f8f8;
    margin: 10px 0;
}
.status-dialog .status-list .item  img{
    display: none;
}
.status-dialog .status-list .active{
    position: relative;
    color: #FC6D64;
    border-color: #FC6D64;
    background-color: #fff;
}
.status-dialog .status-list .active img{
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 2px;
    font-size: 10px;
    color: #fff;
    background-color: #FC6D64;
    border-radius: 10px 0 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-goods {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 70px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 10px;
}
.add-goods .btn {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    color: #fff;
    background-image: linear-gradient( to right , #ff4040 , #FA2C1E);
    font-size: 18px;
}
</style>
